.fade{
    &-enter,&-leave-to {
        opacity: 0;
    }
    &-enter-active, &-leave-active{
        transition: opacity .3s;
    }
}

@keyframes slideInLeft {
    from {
        transform: translate3d(100%, 0, 0);
        opacity: 1;
    }
    to {
        transform: translate3d(0, 0, 0);
             opacity: 1;
    }
}
@keyframes slideInRight {
    from {
        transform: translate3d(-100%, 0, 0);
        opacity: 1;
    }
    to {
        transform: translate3d(0, 0, 0);
             opacity: 1;
    }
}
@keyframes slideLeftOut {
    from {
        transform: translate3d(0, 0, 0);
        opacity: 0;
    }
    to {
        transform: translate3d(100%, 0, 0);
        opacity: 0;
    }
}
@keyframes slideRightOut {
    from {
        transform: translate3d(0, 0, 0);
        opacity: 0;
    }
    to {
        transform: translate3d(-100%, 0, 0);
        opacity: 0;
    }
} 
.slide-left-enter-active {
    animation: slideInLeft .3s forwards;
    z-index:5;
}

.slide-left-leave-active {
    animation: slideLeftOut .3s forwards;
    z-index:3;
}
 .slide-right-enter-active {
    animation: slideInRight .3s forwards;
    z-index:5;
}

.slide-right-leave-active {
    animation: slideRightOut .3s forwards;
    z-index:3;
} 
